<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed>
        <!-- 左边 -->
        <template #left>
          <img class="logo" src="@/assets/logo.png" />
          <span style="color: #fff">新闻头条</span>
        </template>
        <!-- 右边 -->
        <template #right>
          <van-icon
            name="search"
            size="29"
            color="#fff"
            @click="moveSearchPageFn"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- 导航栏+文章 -->
    <div class="main">
      <van-tabs
        v-model="channelId"
        animated
        sticky
        offset-top="1.226667rem"
        @change="channelChangeFn"
      >
        <van-tab
          v-for="item in userChanneList"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        >
          <!-- 文章内容组件 -->
          <ArticleList :Id="channelId"></ArticleList>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="show = true"
      />
      <van-popup class="channel_popip" v-model="show" get-container="body">
        <!-- 子组件 -->
        <ChannelEdit
          :userList="userChanneList"
          :unCheckList="unCheckChannelList"
          @addChannelEV="addChannelFn"
          @removeChannelEV="removeChannelFn"
          @closeEV="closeFn"
          ref="editRef"
          v-model="channelId"
        >
        </ChannelEdit>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChangeilsAPI, updateChannelAPI, removeTheChannelAPI } from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'

export default {
  data () {
    return {
      channelId: 0, // 首页tab导航-激活索引
      userChanneList: [], // 用户选择的频道列表
      allChanneList: [], // 所有频道列表
      show: false, // 点击+号弹出层的显示和隐藏
      channelScrollTobj: {}// 保存每个频道的滚动位置
    }
  },
  computed: {
    unCheckChannelList () {
      // 把所有频道数组挨个对象取出，去用户已选对象里面查找，若是找不到，则让filter方法收集到新数组中
      // const newArr = this.allChanneList.filter(bigObj => {
      //   const index = this.userChanneList.findIndex(smallObj => {
      //     return smallObj.id === bigObj.id
      //   })
      //   if (index > -1) {
      //     return false
      //   } else { return true }
      // })
      // return newArr

      // 优化
      return this.allChanneList.filter(
        bigObj => (
          this.userChanneList.findIndex(
            smallObj => smallObj.id === bigObj.id) === -1))
    }
  },
  components: { ArticleList, ChannelEdit },
  async created () {
    // 获取用户选择频道列表
    const res = await getUserChannelsAPI()
    this.userChanneList = res.data.data.channels
    // 获取所有列表
    const res2 = await getAllChangeilsAPI()
    this.allChanneList = res2.data.data.channels
    // console.log(this.userChanneList, '....', this.allChanneList)
  },
  methods: {
    // tab栏发送切换
    channelChangeFn () {
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTobj[this.channelId]
      })
    },
    // 添加频道——（子传参给父，在父修改数据）
    async addChannelFn (val) {
      this.userChanneList.push(val)// 前端添加渲染完成
      const newArr = this.userChanneList.filter(item => item.id !== 0)
      const theNewArr = newArr.map((item, index) => { // 【形成一个新数组，传递参数】
        const newObj = { ...item }// 拷贝（浅拷贝）
        delete newObj.name
        newObj.seq = index
        return newObj// 让map方法把新对象收集起来，形成一个新数组
      })
      await updateChannelAPI(theNewArr)// 发请求-后端添加频道
    },
    // 删除频道——（子传参给父，在父修该数据）
    async removeChannelFn (val) {
      const index = this.userChanneList.findIndex(item => item.id === val.id)
      this.userChanneList.splice(index, 1)// 前端删除渲染完成
      await removeTheChannelAPI(val.id)// 发请求-后端删除频道
    },
    // 点击子组件×——关闭弹出层
    closeFn () {
      this.show = false
      this.$refs.editRef.isEdit = false// 让子组件的频道转态为false
    },
    // 点击搜索图标
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      this.channelScrollTobj[this.channelId] = document.documentElement.scrollTop
    }
  },
  // 页面激活状态
  activated () {
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  // 页面失去激活状态
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style lang="less" scoped>
.logo {
  widows: 100px;
  height: 30px;
  margin-right: 7px;
}
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popip {
  width: 100vw;
  height: 100vh;
}
</style>
